<!-- 头部组件 -->
<!-- 头部组件 -->
<!-- 头部组件 -->
<template>
<div class="header">
  <div class="header-left">
    <div class="iconfont back-icon">&#xe646;</div>
  </div>
  <div class="header-input">
    <span class="iconfont">&#xe60d;</span>
    输入城市名/景点名/游玩主题
  </div>
  <div class="header-right">
    <router-link  to='/city'>
      {{this.currentCity}}
      <span class="iconfont arrow-icon">&#xe64a;</span>
    </router-link>

  </div>
</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    // 把vuex里的数据 映射到当前组件的计算属性里,映射过来的名字叫currentCity
    ...mapState({
      currentCity: 'city'
    })
  }
}
</script>

<style scoped lang="stylus">
  // 因为在webpack中配置了自定义的路径
  @import '~styles/publicStyle.styl'
  @import '~styles/mixins.styl'
  .header
    display flex
    line-height .86rem
    background $bgHeader
    color #fff
    .header-left
      float left
      width .64rem
      .back-icon
        text-align center
        font-size .4rem
    .header-input
      height .64rem
      line-height .64rem
      margin-top .12rem
      margin-left .1rem
      padding-left .2rem
      flex 1
      background #fff
      border-radius .1rem
      color #ccc
    .header-right
      min-width 1.04rem
      padding-left .1rem
      float right
      text-align center
      ellipsis()
      a
        color white
      .arrow-icon
        font-size 0.24rem
        padding-right .1rem
</style>
